<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screenRef">
      <div class="top">
        <div class="title">超高压输电公司电力科研院</div>
        <headerTop></headerTop>
      </div>
      <div class="bottom">
        <div class="left">
          <lineChart></lineChart>
        </div>
        <div class="center">
          <div class="center_top">
            <!-- https://blog.csdn.net/qq_42371932/article/details/135145516 -->
            <waveformChart></waveformChart>
          </div>
          <div class="center_bottom">
            <temperatureChart></temperatureChart>
          </div>
        </div>
        <div class="right">
          <div class="right_top">
            <prpdChart :chart-data="lineChartData"></prpdChart>
          </div>
          <div class="right_bottom">
            <splitLine></splitLine>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Screen">
import { onMounted } from "vue"
import headerTop from "./component/base/header"
import lineChart from "./component/chart/lineChart"
import temperatureChart from "./component/chart/temperatureChart"
import prpdChart from "./component/chart/prpdChart"
import splitLine from "./component/chart/splitLine"
import waveformChart from "./component/chart/waveformChart/index.vue"

// 获取数据大屏展示内容盒子的DOM元素
let screenRef = ref();
const lineChartData = ref([])
onMounted(() => {
  screenRef.value.style.transform = `scale(${getscale()}) translate(-50%,-50%)`
  init()
})

function init() {
  lineChartData.value = [
    // [15, 2.6],
    // [20, 3.5],
    // [30,4.5],
    // [35,4.8],
    [40,5],
    // [50, 5.8],
    // [60, 6],
    // [66, 6.5],

    // [196, -10.5],
    // [186, -11],
    // [220, -8.5],
    // [210, -9.5],
    // [190, -11],
    // [180, -11.5],
    // [170, -12],
    // [202, -10],
  ]
}


// 定义大屏缩放比例
function getscale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}
//监听
window.onresize = () => {
  screenRef.value.style.transform = `scale(${getscale()}) translate(-50%,-50%)`
}
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: #02172a;

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    background: url(./images/bg_n.jpg) no-repeat;
    background-size: 100% 100%;

    left: 50%;
    top: 50%;
    transform-origin: left top;

    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title{
        color: #fff;
        margin-top: 80px;
        margin-left: 70px;
      }
    }

    .bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      >div {
        height: 100vh;
      }

      .left {
        width: 23%;
        background: url(./images/left_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .right {
        width: 23%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        >div {
          height: 48.5%;
        }

        .right_top {
          background: url(./images/right_top.png) no-repeat;
          background-size: 100% 100%;
          position: relative;
        }

        .right_bottom {
          background: url(./images/right_bottom.png) no-repeat;
          background-size: 100% 100%;
        }
      }

      .center {
        width: 51%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        >div {
          height: 48.5%;
        }

        .center_top {
          background: url(./images/center_top.png) no-repeat;
          background-size: 100% 100%;
        }

        .center_bottom {
          background: url(./images/center_bottom.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
